import { useState } from "react";
import classNames from "classnames";
import "./demo.scss";
export default function TypingPractice() {
  const text = "This is a typing practice app";
  const splitSymbol = " ";
  // 原始文本数组
  const originalWords = text.split(splitSymbol);
  const [currentWordIndex, setCurrentWordIndex] = useState(0);
  const [inputCacheWords, setInputCacheWords] = useState<string[]>([]);
  const onWordSpellCheck = () => {};
  const onUserInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = event.target.value;
    const inputCacheWords = inputValue.split(splitSymbol);
    if (inputCacheWords.length > originalWords.length) {
      inputCacheWords.pop();
      setCurrentWordIndex(-1);
      console.log(inputCacheWords);
      // 检查输入单词的正确性
      onWordSpellCheck();
      // 设置输入框光标的位置
      return;
    }
    console.log(inputCacheWords);
    setCurrentWordIndex(inputCacheWords.length - 1);
    setInputCacheWords(inputCacheWords);
  };
  return (
    <div className="page-container">
      <h1 className="title">Typing Practice</h1>
      <div className="text-container">
        {originalWords.map((word, index) => (
          <div
            className={classNames("word", {
              active: index === currentWordIndex,
              correct:
                index < inputCacheWords.length &&
                word === inputCacheWords[index],
              incorrect:
                index < inputCacheWords.length &&
                word !== inputCacheWords[index],
            })}
            key={index}
          >
            <span className="original-word">{word}</span>
            <span className={classNames("input-word", {})}>
              {inputCacheWords[index]}
            </span>
          </div>
        ))}
        <input
          className="input"
          type="text"
          value={inputCacheWords.join(splitSymbol)}
          onInput={onUserInput}
          onSelect={(event) => {
            console.log(event.target.selectionStart);
          }}
        />
      </div>
    </div>
  );
}
